<template>
  <view class="list">
    <view
      class="item"
      v-for="item of items"
      :key="item.id"
      @click="$utils.toUrl(`/invoice/item/index?id=${item.id}`)"
    >
      <view class="item-hd">
        <view class="title"
          >开票类型-{{
            item.invoice_type == "1" ? "增值税普通发票" : "增值税专用发票"
          }}</view
        >

        <view :class="['status', item.status_ext != '1' ? 'on' : '']">{{
          getStatus(item.status_ext)
        }}</view>
      </view>

      <view class="item-bd">
        <view class="des">
          <view class="label">开票抬头</view>
          <view class="con">{{ item.invoice_title }}</view>
        </view>
        <view class="des">
          <view class="label">发票金额</view>
          <view class="con">¥{{ item.price }}</view>
        </view>
        <view class="des">
          <view class="label">订单编号</view>
          <view class="con">{{ item.order_no }}</view>
        </view>
        <view class="des">
          <view class="label">是否红冲</view>
          <view class="con on">{{ item.is_cover == 1 ? "是" : "否" }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  computed: {
    getStatus() {
      return (status) => {
        let text;
        switch (String(status)) {
          case "0":
            text = "申请中";
            break;

          case "1":
            text = "已开票";
            break;

          case "2":
            text = "已拒绝";
            break;
        }

        return text;
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  padding: 24rpx;
}

.item {
  background: #fff;
  border-radius: 20rpx;
  padding: 0 24rpx;
  margin-bottom: 24rpx;
}

.item-hd {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #f8f8f8;
  .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;
  }

  .status {
    font-size: 24rpx;
    color: #8c8c8c;

    &.on {
      color: #f0250e;
    }
  }
}

.item-bd {
  padding: 10rpx 0;
  .des {
    display: flex;
    padding: 10rpx 0;
    font-size: 24rpx;
  }

  .label {
    width: 150rpx;
    color: #8c8c8c;
  }

  .con {
    flex: 1;
    overflow: hidden;

    &.on {
      color: #f0250e;
    }
  }
}
</style>
